<template>
  <div class="solid">
    <ul class="oUl">
      <li v-for="(item, i) in config.num" :key="i" :style="dealeLiStyle(i)">
        <div v-for="item in 4" :key="item" :style="dealeDivStyle(i)"></div>
      </li>
    </ul>
    <!-- <ol>
      <li class="on">1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
    </ol> -->
  </div>
</template>

<script>
import { reactive } from "vue";
export default {
  setup() {
    let n = 0;
    const { config, transform } = reactive({
      config: {
        num: 100,//数量
        allWidth: 800,//宽度
        transform: 0,//动画初始
      },
    });
    function play() {
      let timer = setInterval(function () {
        n++;
        n %= 4;
        console.log(n);
        config.transform = n * 90;
        // for (var i = 0; i < btn.length; i++) {
        //   btn[i].className = "";
        // }
        // btn[n].className = "on";
        // css.innerHTML +=
        //   ".solid ul li{transform: translateZ(-180px) rotateX(" +
        //   n * 90 +
        //   "deg);}";
      }, 4000);
    }
    function dealeLiStyle(i) {
      return {
        transition: "0.8s " + (0.3 * i) / config.num + "s",
        transform: `translateZ(-180px) rotateX(${config.transform}deg)`,
      };
    }
    function dealeDivStyle(i) {
      return {
        backgroundPositionX: `${-i * (config.allWidth / config.num)}px`,
        backgroundPositionY: '80%',
        width: config.allWidth / config.num + "px",
      };
    }
    play();
    return { config, transform, dealeLiStyle, dealeDivStyle };
  },
};
</script>

<style lang="scss">
.solid {
  height: 200px;
  box-shadow: 1px 7px 25px #fd8fd9;

  ul {
    height: 100%;
    display: flex;
    li {
      width: 100%;
      height: 100%;
      position: relative;
      float: left;
      box-sizing: border-box;
      transform-style: preserve-3d;
      transform: translateZ(-100px);
      //   transform: translateZ(-180px) rotateX(270deg);
      div {
        position: absolute;
        width: 100%;
        height: 100%;
      }
      div:nth-child(1) {
        top: -200px;
        background: url(./img/02.jpg);
        transform-origin: bottom;
        transform: translateZ(100px) rotateX(90deg);
      }
      div:nth-child(2) {
        top: 200px;
        background: url(./img/01.jpg);
        transform-origin: top;
        transform: translateZ(100px) rotateX(-90deg);
      }
      div:nth-child(3) {
        background: url("./img/03.jpg");
        transform-origin: bottom;
        transform: translateZ(100px) rotateX(0deg);
      }
      div:nth-child(4) {
        background: url(./img/04.jpg);
        transform: translateZ(-100px) rotateX(180deg);
      }
    }
  }
}
</style>